<template>
  <div class="login-container">

    <div class="login-main">
   
      <el-form
        class="login-form"
        autocomplete="off"
        :model="loginForm"
        :rules="loginRules"
        ref="loginForm"
        label-position="left"
      >
        <div class="title-container">

        </div>
        <el-form-item prop="username">
          <el-input
            name="username"
            type="text"
            v-model="loginForm.username"
            autocomplete="off"
            placeholder="username"
          />
        </el-form-item>

        <el-form-item prop="password">

          <el-input
            name="password"
            :type="passwordType"
            @keyup.enter.native="handleLogin"
            v-model="loginForm.password"
            autocomplete="off"
            placeholder="password"
          />
          <span class="show-pwd" @click="showPwd">
            <svg-icon icon-class="eye" style="margin: 0 auto" />
          </span>
        </el-form-item>
        <el-button
          type="primary"
          style="width:100%;margin-bottom:30px;background:#FE7400;border: none;"
          :loading="loading"
          @click.native.prevent="handleLogin"
        >登录</el-button>
      </el-form>
    </div>
  </div>
</template>

<script>

import fetchServer from "../src/server/fetch";
export default {

  name: "loginTest",
  data() {
    const validateUsername = (rule, value, callback) => {
      if (!isvalidUsername(value)) {
        callback();
        // callback(new Error('Please enter the correct user name'))
      } else {
        callback();
      }
    };
    const validatePassword = (rule, value, callback) => {
      if (value.length < 3) {
        callback(new Error("The password can not be less than 6 digits"));
      } else {
        callback();
      }
    };
    return {
      loginForm: {
        username: "admin", //
        password: "123456", //
        login_from: 0
      },
      loginRules: {

      },
      passwordType: "password",
      loading: false,
      showDialog: false
    };
  },
  methods: {
    showPwd() {
      if (this.passwordType === "password") {
        this.passwordType = "";
      } else {
        this.passwordType = "password";
      }
    },
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true;
          fetchServer({
            callback: res => {
              if (res.code == 0) {
                var loginForm = {
                  username: "admin", //
                  password: "123456", //
                  login_from: 0
                };
                this.$store.dispatch("setUser", res.data.user);
                this.$store.commit("set_user", res.data.user);
                this.$store.commit("set_role", res.data.role);
                this.$store.dispatch("setRole", res.data.role);
                this.$store
                  .dispatch("LoginByUsername", loginForm)
                  .then(() => {
                    this.loading = false;
                    this.$router.push({ path: "/index" });
                  })
                  .catch(() => {
                    this.loading = false;
                  });
                this.$store.commit("set_token", res.data["iAuthToken"]);
                if (this.$store.state.token) {
                  this.$router.push({ path: "/" });
                } else if (res.data.password_expired) {
                  this.$message({
                    message: "请修改密码",
                    type: "warning"
                  });
                  setTimeout(() => {
                    this.$router.replace("/login");
                  }, 1000);
                } else {
                  this.$router.replace("/login");
                }
              } else {
                this.$message.error(res.str_code);
              }
              this.loading = false;
            },
            url: "/v1/login",
            method: "post",
            data: this.loginForm
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    afterQRScan() {
      // const hash = window.location.hash.slice(1)
      // const hashObj = getQueryObject(hash)
      // const originUrl = window.location.origin
      // history.replaceState({}, '', originUrl)
      // const codeMap = {
      //   wechat: 'code',
      //   tencent: 'code'
      // }
      // const codeName = hashObj[codeMap[this.auth_type]]
      // if (!codeName) {
      //   alert('第三方登录失败')
      // } else {
      //   this.$store.dispatch('LoginByThirdparty', codeName).then(() => {
      //     this.$router.push({ path: '/' })
      //   })
      // }
    }
  },
  created() {
    // window.addEventListener('hashchange', this.afterQRScan)
  },
  destroyed() {
    // window.removeEventListener('hashchange', this.afterQRScan)
  }
};
</script>



